<template>
  <view class="reward_detail">
    <!--头部header-->
    <view class="header">
      <u-navbar  :is-back="true" :custom-back="handleBack" :background="{background: '#ffffff'}" :is-fixed="false" :border-bottom="false">
        <view class="header_title">
          任务详情
          <text class="header_title_num">￥{{ Number(detailData.reward_amount).toFixed(0) }}</text>
        </view>
      </u-navbar>
    </view>
    <!--主题内容-->
    <view class="reward_detail_content">
      <scroll-view
          scroll-y="true"
          :refresher-enabled="false"
          @refresherrefresh="onrefresherrefresh"
          :refresher-triggered="isTriggered"
          refresher-default-style="none"
          lower-threshold="30"
          @scrolltolower="onScrolltolower"
          :scroll-top="scrollTop"
          :scroll-with-animation="true"
          @scroll="onScroll"
          style="height: 100%">
        <view class="reward_detail_list">
          <!-- 加载中提示 -->
          <view class="lanjiazai_wrap" v-if="skeletonLoading">
            <view class="lanjiazai_item">
              <u-loading mode="circle" :color="'#FFA844'" size="80" ></u-loading>
              <view class="tag">加载中...</view>
            </view>
          </view>
          <!--详情内容-->
          <view class="reward_detail_box">
            <!--店铺信息-->
            <view class="detail_shop">
              <view class="detail_shop_content">
                <view class="reward_item_img">
                  <image :src="detailData.logo" mode="widthFix" style="width: 100%"></image>
                </view>
                <view class="reward_item_warp">
                  <view class="reward_item_title ellipsis-one-line">{{ detailData.shop_name }}</view>
                  <view class="reward_item_warp_content">
                    <view v-if="detailData.type === 2" class="reward_distance">
                      <u-icon name="map" color="#888888" size="34" margin-right="10"></u-icon>
                      <text class="distance_text">距您</text>
                      <text class="distance_text" style="color: #FF8212;padding: 0 6rpx;">{{ Number(detailData.distance/1000).toFixed(2) }}km</text>
                      <text class="distance_text" style="padding-left: 8rpx">{{ detailData.address }}</text>
                    </view>
                    <view class="rewar_item_platform">
                      <view v-for="(itemPlat, indexPlat) in detailData.note_platforms" :key="indexPlat" class="reward_item_platform_item">
                        <view class="platform_item_img"><image :src="itemPlat.image" mode="widthFix" style="width: 100%"></image></view>
                        <view class="platform_item_name">
                          {{itemPlat.title}}
                          <text v-if="itemPlat.platformType === 1">(粉丝数≥{{ detailData.apply_condition.xhs_fansNum }}）</text>
                          <text v-if="itemPlat.platformType === 2">(粉丝数≥{{ detailData.apply_condition.dy_fansNum }}）</text>
                          <text v-if="itemPlat.platformType === 3">LV{{ detailData.apply_condition.dz_Level }}</text>
                          <text v-if="itemPlat.platformType === 4">LV{{ detailData.apply_condition.mt_Level }}</text>
                        </view>
                      </view>
                      <view v-if="detailData.type === 1" class="platform_item_commission">
                        <text>赏金:￥</text>
                        <text style="font-size: 36rpx">{{ detailData.reward_amount }}</text>
                      </view>
                      <view v-if="detailData.type === 2" class="platform_item_commission" style="display: flex;align-items: center;">
                        <text>基础佣金:￥</text>
                        <text style="font-size: 36rpx">{{ Number(detailData.reward_amount).toFixed(0) }}</text>
                        <text style="font-size: 40rpx;padding: 0 6rpx;">+</text>
                        <text>套餐报销:￥</text>
                        <text style="font-size: 36rpx">{{ detailData.shopPackageInfo.price < 1 ? Number(detailData.shopPackageInfo.price).toFixed(2) : Number(detailData.shopPackageInfo.price).toFixed(0) }}</text>
                      </view>
                    </view>
                    <view v-if="detailData.type === 1" class="reward_item_btn">
                      <view class="item_remain">{{ detailData.participant_count }}人已报名</view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="detail_shop_countdown">
                <view class="countdown_text">任务截止时间：</view>
                <view class="countdown_time">
                  <text>还剩</text>
                  <u-count-down
                      :timestamp="findcountdown(detailData)"
                      separator="zh"
                      font-size="24"
                      color="#FF7100"
                      :show-seconds="false"
                      style="color: #FF7100 !important;"
                  ></u-count-down>
                </view>
              </view>
            </view>
            <!--任务流程-->
            <view class="reward_detail_warp">
              <view class="process_title"><text class="title_line"></text>任务流程</view>
              <view class="process_content" style="height: 120rpx;">
                <view v-for="(item, index) in sign_process_data" :key="index" class="sign_process_item">
                  <view class="sign_process_item_left">
                    <image v-if="detailData.type === 1" :src="imgUrl + item.image" mode="widthFix" style="width: 68rpx;height: 68rpx;"></image>
                    <image v-else :src="imgUrl + item.image2" mode="widthFix" style="width: 68rpx;height: 68rpx;"></image>
                    <view v-if="detailData.type === 1" class="sign_process_item_text">{{ item.title }}</view>
                    <view v-else class="sign_process_item_text">{{ item.title2 }}</view>
                  </view>
                  <view v-if="index < sign_process_data.length - 1" class="sign_process_item_right">
                    <image :src="imgUrl + item.icon" mode="widthFix" style="width: 48rpx;"></image>
                  </view>
                </view>
              </view>
              <!--查看文案素材-->
              <view v-if="uploadNoteBtnShow" class="process_copywriting">
                <view class="process_copywriting_content">
                  <view class="process_copywriting_title">任务图片及文案素材</view>
                  <view @click="checkAssetFun" class="process_copywriting_btn">查看素材</view>
                </view>
              </view>
            </view>
            <!--任务要求-->
            <view class="reward_detail_warp">
              <view class="process_title"><text class="title_line"></text>任务要求</view>
              <view class="process_content">
                <u-parse :html="detailData.task_requirements" :tag-style="paresStyle"></u-parse>
              </view>
            </view>
            <!--任务规则-->
            <view class="reward_detail_warp">
              <view class="process_title"><text class="title_line"></text>任务规则</view>
              <view class="process_content">
                <u-parse :html="detailData.task_rules" :tag-style="paresStyle"></u-parse>
              </view>
            </view>
          </view>
          <!--加载更多-->
          <!--<view class="chudijiazai">
            <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                        margin-bottom="30"/>
            <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
          </view>-->
        </view>
        <!--填补底部按钮内容高度-->
        <view class="fill_bottom" :style="{height: footHeight + 'px'}"></view>
      </scroll-view>
    </view>
    <!--底部按钮内容-->
    <view class="reward_detail_footer">
      <view class="reward_detail_footer_content">
        <!--客服-->
        <view @click="handleContact" class="service">
          <image :src="imgUrl +'/shop/detail_kefu@3x.png'" style="width: 44rpx;height: 44rpx;"></image>
          <view class="service_text u-line-1">客服</view>
        </view>
        <!--普通任务按钮-->
        <view :style="{flex: normalBtnShow ? '0' : '1'}">
          <view v-if="normalBtnShow && !expertShowBtn && detailData.user_enroll_status === 0" @click="SignUpTipFun(detailData.type)" class="submit_btn">立即报名</view>
          <view v-if="!normalBtnShow && detailData.user_enroll_status !== 0" class="normal_submit_btn">
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status !== 7 && detailData.user_enroll_status !== 8 && detailData.user_enroll_status !== 9 && detailData.user_enroll_status !== 10 && detailData.user_enroll_status !== 11 && detailData.user_enroll_status !== 12 && detailData.user_enroll_status !== 13" @click="cancelSignUpFun()" class="submit_cancel" style="width: 32%">取消报名</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 3" @click="SignUpTipFun(detailData.type)" class="submit_btn">立即报名</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 1" class="wait_submit_btn">
              <view class="wait_submit_btn_text">等待商家正在筛选中</view>
              <view class="wait_submit_btn_tip">
                <image :src="imgUrl +'/reward/reward_btn_bg01.png'" style="width: 286rpx;height: 56rpx;display: block;"></image>
                <text class="wait_submit_btn_tip_text">筛选预计24小时内完成</text>
              </view>
            </view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 5" @click="getTaskAssetFun(signId)" class="submit_btn">获取任务素材</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 6" @click="showPackageFun" class="submit_btn">去购买套餐</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 7" @click="UploadNoteVoucherFun(detailData)" class="wait_submit_btn">去上传笔记凭证</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 8" class="wait_submit_btn">待审核笔记</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 9" @click="UploadNoteVoucherFun(detailData)" class="wait_submit_btn">修改笔记凭证</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 10" class="submit_note_btn">驳回不可提交</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 11" class="submit_note_btn">笔记审核通过</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 12" class="submit_note_btn">待返款</view>
            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 13" class="submit_note_btn">已返款</view>
            <!--<view v-if="detailData.type === 1 && detailData.user_enroll_status !== 0 && detailData.user_enroll_status !== 7" style="width: 65%;">
              <view class="submit_btn" style="width: 100%;">任务进行中，请耐心等待...</view>
            </view>-->
          </view>
          <view v-if="!normalBtnShow && detailData.user_enroll_status === 0" class="normal_submit_btn">
            <view v-if="!uploadNoteBtnShow" @click="cancelSignUpFun()" class="submit_cancel">取消报名</view>
            <view v-if="!uploadNoteBtnShow && SuccessStatus === 1" class="wait_submit_btn">
              <view class="wait_submit_btn_text">等待商家正在筛选中</view>
              <view class="wait_submit_btn_tip">
                <image :src="imgUrl +'/reward/reward_btn_bg01.png'" style="width: 286rpx;height: 56rpx;display: block;"></image>
                <text class="wait_submit_btn_tip_text">筛选预计24小时内完成</text>
              </view>
            </view>
            <view v-if="!uploadNoteBtnShow && SuccessStatus === 5" @click="getTaskAssetFun(signId)" class="submit_btn">获取任务素材</view>

            <view v-if="uploadNoteBtnShow && detailData.user_enroll_status === 7" @click="UploadNoteVoucherFun(detailData)" class="submit_note_btn">去上传笔记凭证</view>
          </view>
        </view>
        <view v-if="expertShowBtn && detailData.user_enroll_status === 0 && detailData.type === 2" style="flex: 1;" class="normal_submit_btn">
          <view v-if="!uploadNoteBtnShow" @click="cancelSignUpFun()" class="submit_cancel">取消报名</view>
          <view v-if="!uploadNoteBtnShow && SuccessStatus === 6" @click="showPackageFun" class="submit_btn">去购买套餐</view>
          <view v-if="!uploadNoteBtnShow && SuccessStatus === 1" class="wait_submit_btn">
            <view class="wait_submit_btn_text">等待商家正在筛选中</view>
            <view class="wait_submit_btn_tip">
              <image :src="imgUrl +'/reward/reward_btn_bg01.png'" style="width: 286rpx;height: 56rpx;display: block;"></image>
              <text class="wait_submit_btn_tip_text">筛选预计24小时内完成</text>
            </view>
          </view>
        </view>
       <!--达人任务按钮-->
        <!--<view v-if="detailData.type === 2 && detailData.user_enroll_status === 0" style="flex:1;display: flex;justify-content: flex-end;">
          <view v-if="expertShowBtn" @click="SignUpTipFun(detailData.type)" class="submit_btn" style="width: 90%;">立即报名</view>
          <view v-if="!expertShowBtn && detailData.is_apply_audit === 1" class="wait_submit_btn">
            <view class="wait_submit_btn_text">等待商家正在筛选中</view>
            <view class="wait_submit_btn_tip">
              <image :src="imgUrl +'/reward/reward_btn_bg01.png'" style="width: 286rpx;height: 56rpx;display: block;"></image>
              <text class="wait_submit_btn_tip_text">筛选预计24小时内完成</text>
            </view>
          </view>
          <view v-if="!expertShowBtn && detailData.is_apply_audit === 0" @click="expertSignUpSuccessShow = true" class="submit_btn" style="width: 90%;">去购买套餐</view>
        </view>-->


      </view>
    </view>

    <!--普通任务报名成功弹窗-->
    <u-popup v-model="signUpSuccessShow" mode="bottom" border-radius="30" @close="signUpSuccessShow=false" :closeable="false" width="100%" height="65%">
      <view class="sign_success_box">
        <!--弹窗标题-->
        <view class="popup_title">
          <view class="popup_title_text">确认报名</view>
          <view class="popup_title_close">
            <u-icon name="close" size="28" color="#8D8D8D" @click="signUpSuccessShow=false"></u-icon>
          </view>
        </view>
        <!--弹窗内容-->
        <view class="sign_success_content">
          <!--店铺信息-->
          <view class="detail_shop">
            <view class="detail_shop_content">
              <view class="reward_item_img">
                <image :src="detailData.logo" mode="widthFix" style="width: 100%"></image>
              </view>
              <view class="reward_item_warp">
                <view class="reward_item_title ellipsis-one-line">{{ detailData.shop_name }}</view>
                <view class="reward_item_warp_content">
                  <view v-if="detailData.type === 2" class="reward_distance">
                    <u-icon name="map" color="#888888" size="34" margin-right="10"></u-icon>
                    <text class="distance_text">距您</text>
                    <text class="distance_text" style="color: #FF8212;padding: 0 6rpx;">{{ detailData.distance/1000 }}km</text>
                    <text class="distance_text" style="padding-left: 8rpx">{{ detailData.address }}</text>
                  </view>
                  <view class="rewar_item_platform">
                    <view v-for="(itemPlat, indexPlat) in detailData.note_platforms" :key="indexPlat" class="reward_item_platform_item">
                      <view class="platform_item_img"><image :src="itemPlat.image" mode="widthFix" style="width: 100%"></image></view>
                      <view class="platform_item_name">
                        {{itemPlat.title}}
                        <text v-if="itemPlat.platformType === 1">(粉丝数≥{{ detailData.apply_condition.xhs_fansNum }}）</text>
                        <text v-if="itemPlat.platformType === 2">(粉丝数≥{{ detailData.apply_condition.dy_fansNum }}）</text>
                        <text v-if="itemPlat.platformType === 3">LV{{ detailData.apply_condition.dz_Level }}</text>
                        <text v-if="itemPlat.platformType === 4">LV{{ detailData.apply_condition.mt_Level }}</text>
                      </view>
                    </view>
                    <view class="platform_item_commission">
                      <text>赏金:￥</text>
                      <text style="font-size: 36rpx">{{ detailData.reward_amount }}</text>
                    </view>
                  </view>
                  <view class="reward_item_btn">
                    <view class="item_remain">{{ detailData.participant_count }}人已报名</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="detail_shop_countdown">
              <view class="countdown_text">任务截止时间：</view>
              <view class="countdown_time">
                <text>还剩</text>
                <u-count-down
                    :timestamp="findcountdown(detailData)"
                    separator="zh"
                    font-size="24"
                    color="#FF7100"
                    :show-seconds="false"
                    style="color: #FF7100 !important;"
                ></u-count-down>
              </view>
            </view>
          </view>
          <!--任务规则-->
          <view class="reward_detail_warp">
            <view class="process_title"><text class="title_line"></text>任务规则</view>
            <view class="process_content">
              <u-parse :html="detailData.task_rules" :tag-style="paresStyle"></u-parse>
            </view>
          </view>
          <!--填充底部按钮高度-->
          <view class="fill_bottom" :style="{height: footHeight + 'px'}"></view>
        </view>
        <!--弹窗报名按钮-->
        <view class="sign_success_btn">
          <view class="sign_success_btn_content">
            <view v-if="detailData.type === 1" @click="SignUpFun(detailData.id)" class="submit_btn">立即报名</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--达人任务报名成功弹窗-->
    <u-popup v-model="expertSignUpSuccessShow" mode="bottom" border-radius="30" @close="expertSignUpSuccessShow=false" :closeable="false" width="100%" height="65%">
      <view v-if="detailData.type === 2" class="sign_success_box">
        <!--弹窗标题-->
        <view class="popup_title">
          <view class="popup_title_text">确认报名</view>
          <view class="popup_title_close">
            <u-icon name="close" size="28" color="#8D8D8D" @click="expertSignUpSuccessShow=false"></u-icon>
          </view>
        </view>
        <!--弹窗内容-->
        <view class="sign_success_content">
          <!--店铺信息-->
          <view class="detail_shop">
            <!--店铺名称-->
            <view @click="goShopDetails(detailData)" class="detail_shop_name">
              <view class="ellipsis-one-line">
                <image style="height: 28rpx;width: 28rpx;" :src="imgUrl + '/TanDianDaRen/index/Frame.png'"></image>
                <text style="font-size: 24rpx;color: #888888;margin-left: 10rpx;">{{ detailData.shopPackageInfo.name }}</text>
              </view>
              <u-icon name="arrow-right" size="24" color="#888888" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon>
            </view>
            <view class="detail_shop_content">
              <view class="reward_item_img" style="width: 168rpx;height: 168rpx;">
                <image :src="detailData.logo" mode="widthFix" style="width: 100%"></image>
              </view>
              <view class="reward_item_warp" style="position: relative">
                <!--套餐名称-->
                <view @click="gotoPackageDetail(detailData)" class="reward_item_title" style="display: flex;justify-content: space-between;align-items: center">
                  <view class="ellipsis-one-line" style="width: calc(100% - 100rpx);">{{ detailData.shop_name }}</view>
                  <view style="color: #888888;width: 100rpx;"><text>详情</text><u-icon name="arrow-right" size="24" color="#888888" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon></view>
                </view>
                <view class="reward_item_warp_content" style="position: unset;">
                  <view class="reward_distance" style="font-size: 24rpx;color: #888888;">
                    <view v-if="detailData.shopPackageInfo.is_reservation == 2" style="color: #999999;flex: 5">
                      <text  style="color: #fd6a00;">免预约 | 无需预约</text>
                      <text>{{detailData.shopPackageInfo.weekStuta}}</text>
                      均可使用
                    </view>
                    <view v-if="detailData.shopPackageInfo.is_reservation == 1" style="color: #999999;flex: 5">
                      <text  style="color: #fd6a00;">需要预约</text>
                      <text>{{detailData.shopPackageInfo.weekStuta}}</text>
                      均可使用
                    </view>
                  </view>
                  <view class="rewar_item_platform" style="position: absolute;bottom: 0;">
                    <view class="platform_item_commission" style="display: flex;align-items: center">
                      <text>探店价:￥</text>
                      <text style="font-size: 36rpx">{{ detailData.shopPackageInfo.price }}</text>
                      <view style="font-size: 26rpx;color: #06A216;padding: 10rpx 14rpx;background: #E8F6E8;border-radius: 8rpx;margin-left: 10rpx;">随时退 过期退</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view><u-line color="#F7F7F7"></u-line></view>
            <!--店铺要求-->
            <view class="detail_shop_platform" style="padding: 20rpx 20rpx 0;font-size: 26rpx;">
              <view class="platform_item" style="display: flex;justify-content: space-between;padding-bottom: 20rpx;">
                <view style="color: #888888;">活动要求：</view>
                <view style="color: #333333;display: flex;align-items: center;">
                  <view>到店体验后发布1篇</view>
                  <view v-if="detailData.note_platforms.length > 1" style="display: flex;align-items: center;">
                    <view v-for="(item, index) in detailData.note_platforms" :key="index">
                      <view v-if="index !== detailData.note_platforms.length - 1" style="color: #FF7A00;">{{ item.title }}、</view>
                      <view v-else style="color: #FF7A00;">{{ item.title }}</view>
                    </view>
                  </view>
                  <view v-else>
                    <view v-for="(item, index) in detailData.note_platforms" :key="index">
                      <view style="color: #FF7A00;">{{ item.title }}</view>
                    </view>
                  </view>
                  <view>笔记</view>
                </view>
              </view>
              <view class="platform_item" style="display: flex;justify-content: space-between;padding-bottom: 20rpx;">
                <view style="color: #888888;">购买平台：</view>
                <view style="color: #333333;">在领惠探店平台购买套餐</view>
              </view>
              <view class="platform_item" style="display: flex;justify-content: space-between;padding-bottom: 20rpx;">
                <view style="color: #888888;">随时退：</view>
                <view style="text-align: right">
                  <view style="color: #333333;padding-bottom: 8rpx;">明天23:59前随时退</view>
                  <view style="color: #FF7A00;font-size: 24rpx;">超时取消将影响下一次报名</view>
                </view>
              </view>
            </view>
            <!--套餐详情-->
            <view class="detail_shop_detail" style="padding: 4rpx;">
              <view @click="taskPackageShowFun" class="detail_shop_detail_content" style="padding: 12rpx;background: #FFF9EE;display: flex;align-items: center;font-size: 24rpx;">
                <view class="detail_shop_detail_left" style="width:120rpx;">套餐包含：</view>
                <view class="detail_shop_detail_right ellipsis-one-line" style="width: calc(100% - 210rpx);color: #FF7A00;">
                  <text v-for="(item, index) in taskDetailData" :key="index" v-if="item.price > 0" class="detail_shop_detail_right_item">
                    <text>{{item.name}}</text>
                    <text>{{item.num + '份'}} + </text>
                  </text>
                </view>
                <view style="color: #888888;width: 90rpx;"><text>详情</text><u-icon name="arrow-right" size="24" color="#888888" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon></view>
              </view>
            </view>
          </view>
          <!--返利-->
          <view class="sign_rebate" >
            <view class="sign_rebate_content">
              <view class="subinfo_item u-flex">
                <view style="color: #999999">活动返利</view>
                <text>付{{ toFixedTwo(detailData.shopPackageInfo.price) }}
                  <text style="color: #FF5F15">返{{ toFixedTwo(detailData.shopPackageInfo.rebate_amount) }}</text>
                </text>
              </view>
              <view class="subinfo_item u-flex">
                <view style="color: #999999;flex: 1">
                  <text>探店红包</text>
                  <u-icon name="question-circle" size="28" color="#888888"></u-icon>
                </view>
                <view @click="getRebateFun">
                  <text class="cs"  style="color: #999999;">暂无可用</text>
                  <u-icon name="arrow-right" size="24" color="#888888" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon>
                </view>
              </view>
              <view style="padding-bottom: 10rpx;"><u-line color="#F7F7F7"></u-line></view>
              <view class="huaxjia" style="text-align: right;">
                <text>共计返利
                  <text style="color: #FF5F15;margin-left: 8rpx">付{{
                      toFixedTwo(detailData.shopPackageInfo.price)
                    }}返{{ toFixedTwo(detailData.shopPackageInfo.rebate_amount) }}
                  </text>
                </text>
              </view>
            </view>
          </view>
          <!--支付方式-->
          <view class="Pay_type">
            <view class="type_item u-flex" v-for="(item,index) in payType" :key="index" @click="myYUe > '0.00' && myYUe >= price?xuanzePayType(item,index):null">
              <view class="yebuzu" v-if="item.is_balance == true && (myYUe == '0.00' || myYUe < price)">余额不足</view>
              <view class="pay_name u-flex">
                <image :src="item.icon"></image>
                <view>{{item.name}}<span v-if="item.is_balance == true">剩余¥{{myYUe || '0.00'}}</span></view>
              </view>
              <view class="choose_icon">
                <image :src="imgUrl + '/image/choose_2.png'" v-if="payTypeidx == index"></image>
                <image :src="imgUrl + '/image/choose_1.png'" v-else-if="myYUe > '0.00' && myYUe >= price"></image>
              </view>
            </view>
          </view>
          <!--填充底部按钮高度-->
          <view :style="{height: footHeight + 'px'}"></view>
        </view>
        <!--弹窗报名按钮-->
        <view class="sign_success_btn">
          <view class="sign_success_btn_content" style="position: relative;">
            <view class="submit_btn_tip">
              <image :src="imgUrl +'/reward/reward_btn_bg02.png'" style="width: 140rpx;height: 48rpx;display: block;"></image>
              <text class="submit_btn_tip_text">返{{ toFixedZero(detailData.shopPackageInfo.rebate_amount) }}</text>
            </view>
            <view @click="BuyTaskPackageFun(detailData.shop_package_id)" class="submit_btn">提交订单￥{{ toFixedZero(detailData.shopPackageInfo.price) }}</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--报名失败弹窗-->
    <u-popup v-model="signUpFailShow" mode="center" border-radius="20" @close="signUpFailShow=false" :closeable="false" width="80%" height="590rpx">
      <view class="sign_fail_box">
        <view class="sign_fail_img"><image :src="imgUrl +'/reward/reward_fail.png'" mode="widthFix" style="width: 100%;"></image></view>
        <view class="sign_fail_title">很抱歉，您未达到任务要求</view>
        <view class="sign_fail_subtitle">请浏览其他任务进行报名参与，谢谢</view>
        <view v-if="myPlatformData.length > 0" style="font-size: 26rpx;padding-bottom: 10rpx;color: #666666;">以下是您未达到的要求：</view>
        <view v-if="myPlatformData.length > 0" class="sign_fail_content">
          <view class="sign_fail_text">当前活动要求</view>
          <view class="platform_item_name">
            {{platformVal.title}}
            <text v-if="platformVal.type === 1">(粉丝数≥{{ platformVal.num }}）</text>
            <text v-if="platformVal.type === 2">(粉丝数≥{{ platformVal.num }}）</text>
            <text v-if="platformVal.type === 3">等级LV{{ platformVal.num }}</text>
            <text v-if="platformVal.type === 4">等级LV{{ platformVal.num }}</text>
          </view>
        </view>
        <view v-else class="sign_fail_content">
          您还没有认证平台，请先去认证！
        </view>
        <view class="sign_fail_btn">
          <view class="sign_fail_btn_content">
            <view @click="signUpFailShow=false" class="submit_cancel">我知道了</view>
            <view v-if="myPlatformData.length > 0" @click="gotoOtherPage" class="submit_btn">去浏览任务</view>
            <view v-else @click="gotoPlatform" class="submit_btn">去认证</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--下载素材弹窗-->
    <u-popup v-model="downloadAssetShow" mode="bottom" border-radius="30" @close="downloadAssetShow=false" :closeable="false" :safe-area-inset-bottom="true" width="100%" height="60%" :custom-style="{background: 'transparent'}">
      <view class="download_asset_box">
        <view class="popup_title">
          <view class="popup_title_text">下载素材</view>
          <view class="popup_title_close">
            <u-icon name="close" size="28" color="#8D8D8D" @click="downloadAssetShow=false"></u-icon>
          </view>
        </view>
        <!--下载进度-->
        <view v-if="!downloadAssetProcessBtn" class="download_asset_progress">
          <view class="progress_left">下载进度：</view>
          <view class="progress_bar">
            <u-line-progress active-color="#FF5429" :percent="assetPercent" :round="true" :show-percent="false"></u-line-progress>
          </view>
          <view class="progress_right">{{ assetNum }}/{{ maskAssetData.length }}</view>
        </view>
        <!--素材图片视频内容 -->
        <view class="download_asset_content">
          <view class="download_asset_tips">
            <view class="download_asset_tips_left">
              <view class="download_asset_tips_title">素材: 共<text v-if="maskAssetMP4 > 0">{{ maskAssetMP4 }}个视频</text> <text v-if="maskAssetJPG > 0">{{ maskAssetJPG }}张图片</text></view>
              <view class="download_asset_tips_content">tips:素材仅可用于本次任务，禁止二次传播</view>
            </view>
            <view v-if="lookAssetShow && maskAssetData.length > 0" class="download_asset_tips_right">
              <view @click="aaveAssetImgFun" class="download_asset_tips_right_btn">保存图片</view>
            </view>
          </view>
          <!--素材列表 -->
          <view class="download_asset_list">
            <view v-for="(item, index) in maskAssetData" v-if="maskAssetData.length > 0" :key="index" class="download_asset_item">
              <view class="download_asset_item_img">
                <image :src="item.url" mode="widthFix" style="width: 100%"></image>
              </view>
            </view>
            <view v-else style="flex: 1;padding: 20rpx 0;color: #666666;text-align: center;">
              该任务暂无素材，请等待商家添加素材
            </view>
          </view>

        </view>
        <!--文案标题-->
        <view v-if="lookAssetShow" class="download_copywriting_warp">
          <view class="download_copywriting_warp_title">
            <view class="download_copywriting_warp_title_text">文案标题</view>
            <view @click="copyWritingFun(copywritingTitle)" class="download_copywriting_warp_title_copy">复制标题</view>
          </view>
          <view class="download_copywriting_warp_content">
            <view class="download_copywriting_warp_content_text" style="color: #3D3D3D">{{ copywritingTitle }}</view>
          </view>
        </view>
        <!--文案内容-->
        <view v-if="lookAssetShow" class="download_copywriting_warp">
          <view class="download_copywriting_warp_title">
            <view class="download_copywriting_warp_title_text">文案内容</view>
            <view @click="copyWritingFun(copywritingContent)" class="download_copywriting_warp_title_copy">复制内容</view>
          </view>
          <view class="download_copywriting_warp_content">
            <view class="download_copywriting_warp_content_text" style="color: #666666;">{{ copywritingContent }}</view>
          </view>
        </view>
        <!--填充底部按钮高度-->
        <view v-if="uploadNoteBtnShow" class="fill_bottom" :style="{height: footHeight + 'px'}"></view>
        <view v-if="uploadNoteBtnShow" class="download_asset_btn">
          <view class="download_asset_btn_content">
            <view v-if="downloadAssetProcessBtn" @click="downloadAssetFun" class="submit_btn">立即下载</view>
            <view v-if="!downloadAssetProcessBtn" class="submit_btn">正在下载中，请耐心等待</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--下载素材完成弹窗 v-model="downloadAssetFinishShow"-->
    <u-popup v-model="downloadAssetFinishShow" mode="center" border-radius="20" :closeable="false" width="80%" >
      <view class="download_finish_box">
        <view class="download_finish_img"><u-icon name="checkmark-circle-fill" size="100" color="#13BF69"></u-icon></view>
        <view class="download_finish_title">素材已全部下载</view>
        <view class="download_finish_subtitle">请复制下方文案，去对应平台发布笔记</view>
        <view class="download_finish_content">
          <view class="download_copywriting">
            <view class="download_copywriting_title">
              <text style="width: 80rpx;">标题：</text>
              <text class="download_copywriting_title_text">{{ copywritingTitle }}</text>
            </view>
            <view class="download_copywriting_content">
              <text style="width: 80rpx;">内容：</text>
              <text class="download_copywriting_content_text">{{ copywritingContent }}</text>
            </view>
          </view>
        </view>
        <view class="download_finish_btn">
          <view class="download_finish_btn_content">
            <view @click="downloadAssetFinishShow=false" class="submit_cancel">我知道了</view>
            <view @click="copyWritingFun(copywritingTitle, copywritingContent)" class="submit_btn">复制文案</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--任务套餐详情-->
    <u-popup v-model="taskPackageShow" mode="bottom" border-radius="20" @close="taskPackageShow=false" :closeable="false" width="80%" height="80%">
      <view class="task_package_box">
        <!--弹窗标题-->
        <view class="popup_title">
          <view class="popup_title_text">套餐详情</view>
          <view class="popup_title_close">
            <u-icon name="close" size="28" color="#8D8D8D" @click="taskPackageShow=false"></u-icon>
          </view>
        </view>
        <!--弹窗内容-->
        <view class="task_package_content">
          <!--店铺信息-->
          <view class="detail_shop">
            <!--店铺名称-->
            <view @click="goShopDetails(detailData)" class="detail_shop_name">
              <view class="ellipsis-one-line">
                <image style="height: 28rpx;width: 28rpx;" :src="imgUrl + '/TanDianDaRen/index/Frame.png'"></image>
                <text style="font-size: 24rpx;color: #888888;margin-left: 10rpx;">{{ detailData.shopPackageInfo.name }}</text>
              </view>
              <u-icon name="arrow-right" size="24" color="#888888" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon>
            </view>
            <view class="detail_shop_content">
              <view class="reward_item_img" style="width: 168rpx;height: 168rpx;">
                <image :src="detailData.logo" mode="widthFix" style="width: 100%"></image>
              </view>
              <view class="reward_item_warp" style="position: relative">
                <!--套餐名称-->
                <view @click="gotoShopDetail" class="reward_item_title" style="display: flex;justify-content: space-between;align-items: center">
                  <view class="ellipsis-one-line" style="width: calc(100% - 100rpx);">{{ detailData.shop_name }}</view>
                  <view style="color: #888888;width: 100rpx;"><text>详情</text><u-icon name="arrow-right" size="24" color="#888888" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon></view>
                </view>
                <view class="reward_item_warp_content" style="position: unset;">
                  <view v-if="detailData.type === 2" class="reward_distance">
                    <u-icon name="map" color="#888888" size="34" margin-right="10"></u-icon>
                    <text class="distance_text">距您</text>
                    <text class="distance_text" style="color: #FF8212;padding: 0 6rpx;">{{ Number(detailData.distance/1000).toFixed(2) }}km</text>
                    <text class="distance_text" style="padding-left: 8rpx">{{ detailData.address }}</text>
                  </view>
                  <view class="rewar_item_platform" style="position: absolute;bottom: 0;">
                    <view class="platform_item_commission" style="display: flex;align-items: center">
                      <text>探店价:￥</text>
                      <text style="font-size: 36rpx">{{ detailData.shopPackageInfo.price }}</text>
                      <view style="font-size: 26rpx;color: #06A216;padding: 10rpx 14rpx;background: #E8F6E8;border-radius: 8rpx;margin-left: 10rpx;">随时退 过期退</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view><u-line color="#F7F7F7"></u-line></view>

            <!--套餐详情-->
            <view class="detail_shop_detail" style="padding: 4rpx;">
              <view class="detail_shop_detail_content" style="padding: 12rpx;background: #FFF9EE;display: flex;align-items: center;font-size: 24rpx;">
                <view class="detail_shop_detail_left" style="width:120rpx;">套餐包含：</view>
                <view class="detail_shop_detail_right ellipsis-one-line" style="width: calc(100% - 210rpx);color: #FF7A00;">
                  <text v-for="(item, index) in taskDetailData" :key="index" v-if="item.price > 0" class="detail_shop_detail_right_item">
                    <text>{{item.name}}</text>
                    <text>{{item.num + '份'}} + </text>
                  </text>
                </view>
                <view style="color: #888888;width: 90rpx;"><text>详情</text><u-icon name="arrow-right" size="24" color="#888888" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon></view>
              </view>
            </view>
          </view>
          <!--弹窗详情内容-->
          <view class="task_package_content_box">
            <view class="task_package_content_warp">
              <view class="task_package_content_t">周一至周日均可使用</view>
            </view>
            <view class="task_package_content_item_box">
              <view v-for="(item, index) in taskDetailData" :key="index" class="task_package_content_item">
                <view v-if="item.type == 1" class="task_package_content_item_title">
                  <view v-if="index > 0" style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
                  <text style="width: 12rpx;height: 12rpx;background: #D8D8D8;"></text>{{ item.name }}
                </view>
                <view v-else class="task_package_content_item_content">
                  <view class="task_package_content_item_content_name">{{ item.name }}</view>
                  <view class="task_package_content_item_content_val">
                    <view class="task_package_num">({{ item.num }}份)</view>
                    <view class="task_package_price">￥{{ item.price }}</view>
                  </view>
                </view>
              </view>
              <view class="task_package_content_original">
                <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
                原价：<text style="color: #888888;">￥</text>{{ detailData.shopPackageInfo.price }}
              </view>
            </view>
          </view>
          <!--填充底部按钮高度-->
          <view :style="{height: footHeight + 'px'}"></view>
        </view>
        <!--弹窗报名按钮-->
        <view class="task_package_btn">
          <view class="task_package_btn_content" style="position: relative;">
            <view @click="taskPackageShow = false" class="submit_btn">我知道了</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--没有绑定手机提示-->
    <u-popup v-model="BingdingPhone_Popup" mode="center" width="584" border-radius="20" :closeable="true"
             :mask-close-able="false">
      <view class="tc_wrap">
        <view class="guanyu_title">温馨提示</view>
        <view class="wenan"></view>
        <view class="tc_info">您好绑定手机号后才可以进行抢单哦！</view>
        <view class="tc_btn_box">
          <view class="lijipay1" style="margin-right: 0;">
            <u-button hover-class="none" type="info" shape="circle" :ripple="true"
                      @click="BingdingPhone_Popup = false">不用了
            </u-button>
          </view>
          <view class="lijipay" style="margin-left: 10rpx;">
            <u-button hover-class="none" type="info" shape="circle" :ripple="true"
                      open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
            >去绑定
            </u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      imgUrl: app.globalData.imgurlBwc,
      footHeight: 0, // 头部内容高度
      taskId: '', // 任务id
      signId: '', // 素材id
      detailData: {}, // 任务详情数据
      taskDetailData: [], // 套餐详情数据
      SuccessStatus: '', //报名成功后的状态
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/xhs@2x.png',
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/dy@2x.png',
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/dzdp@2x.png',
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/mt@2x.png',
        },
      ],
      detailPlatform: [], // 任务平台数据
      myPlatformData: [],// 平台数据
      /* 报名流程数据 */
      sign_process_data: [
        {
          title: '报名活动',
          title2: '报名活动',
          image: '/reward/sign_process_img01.png',
          image2: '/reward/sign_process_img01.png',
          icon: '/reward/sign_process_arrow.png'
        },
        {
          title: '下载素材',
          title2: '购买套餐',
          image: '/reward/sign_process_img02.png',
          image2: '/reward/sign_process_img05.png',
          icon: '/reward/sign_process_arrow.png'
        },
        {
          title: '发布笔记',
          title2: '发布笔记',
          image: '/reward/sign_process_img03.png',
          image2: '/reward/sign_process_img03.png',
          icon: '/reward/sign_process_arrow.png'
        },
        {
          title: '审核到账',
          title2: '审核到账',
          image: '/reward/sign_process_img04.png',
          image2: '/reward/sign_process_img04.png',
          icon: '/reward/sign_process_arrow.png'
        },
      ],

      skeletonLoading: false, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      isTriggered: false, // 下拉刷新
      scrollTop: 0,//滚动高度
      currentScrollTop: 0,//当前滚动位置
      /* 富文本样式 */
      paresStyle: {
        p: "line-height: 40rpx;padding-bottom:8rpx;font-size:28rpx;",
        span: "font-size: 28rpx"
      },
      signUpSuccessShow: false, //报名成功弹窗
      expertSignUpSuccessShow: false, //达人报名套餐弹窗
      taskPackageShow: false, //套餐详情弹窗
      signUpFailShow: false, //报名失败弹窗
      downloadAssetShow: false, // 下载素材弹窗
      downloadAssetFinishShow: false, // 下载素材完成弹窗
      lookAssetShow: false, // 查看素材显示
      // 定义是否满足店铺平台要求默认对象
      platformVal: {
        type: 1,
        num: '',
        title: '您还未认证平台',
      },
      normalBtnShow: true, // 普通任务按钮显示
      uploadNoteBtnShow: false, // 上传笔记任务按钮显示
      expertShowBtn: false, // 达人任务按钮显示
      maskAssetData: [], // 任务素材数据
      jumpAssetShow: false, //  订单跳转任务素材显示
      assetPercent: 0, // 进度条值
      assetNum: 0, // 下载的任务素材数量
      maskAssetMP4: '', // 任务素材mp4数量
      maskAssetJPG: '', // 任务素材jpg数量
      downloadAssetProcessBtn: true, // 正在下载素材进度按钮显示
      copywritingTitle: '', // 文案标题
      copywritingContent: '', // 文案内容
      payType:[
        /* {
          name: '余额支付',
          icon: app.globalData.imgurl + '/home_logo.png',
          type: 'balance',
          is_balance: true
        }, */
        {
          name: '微信支付',
          icon: app.globalData.imgurl + '/PackageDetails/Frame-3.png',
          type: 'applet_wechat',
          is_balance: false
        }
      ],
      BingdingPhone_Popup: false, //  绑定手机弹窗
      payTypeidx: 0,
      payTypeName: 'balance',
      myYUe: '0.00',
    };
  },
  onLoad(options) {
    let that = this
    // that.detailData = JSON.parse(decodeURIComponent(options.data))
    // 详情id
    if (options.taskId){
      that.taskId = options.taskId
      // 显示状态!=0 的按钮
      that.normalBtnShow = false
      that.uploadNoteBtnShow = true
    }
    // 任务素材 id
    if (options.signId){
      that.signId = options.signId
    }
    // 下载素材弹窗显示
    if (options.downloadAssetProcessBtn){
      // 显示下载素材弹窗
      that.downloadAssetShow = true
      // 显示保存图片按钮、显示文案
      that.lookAssetShow = true
      that.getSignUpTaskDetailFun(that.signId)
      // 获取任务素材
      that.getTaskAssetFun(that.signId)
    }
    // 平台数据事件
    that.getPlatformData()
  },
  onShow() {
    let that = this
    // 获取头部内容高度
    uni.createSelectorQuery().select('.reward_detail_footer').boundingClientRect(rect => {
      that.footHeight = rect.height
      console.log('头部内容高度', rect.height)
    }).exec();
    // 获取任务详情事件
    that.getTaskDetailFun()

  },
  methods: {
    onScroll(e){
      this.currentScrollTop = e.detail.scrollTop
    },
    toFixedTwo(val) {
      var str = Number(val).toFixed(2)
      return str;
    },
    toFixedZero(val) {
      var str = Number(val) > 10 ? Number(val).toFixed(0) : Number(val).toFixed(2)
      return str;
    },
    // 跳转红包页面
    getRebateFun(){
      uni.navigateTo({
        url: '/pages/Rebate/Rebate'
      });
    },
    // 选择支付方式
    xuanzePayType(item,index){
      let that = this
      that.payTypeidx = index
      that.payTypeName = item.type
      //设置支付方式到缓存里面，以便订单详情待支付里面使用
      uni.setStorageSync("payTypes", item.type)
    },
    // 下拉刷新
    /* onrefresherrefresh(){
      let that = this
      that.skeletonLoading = true
      that.pageSize = 1
      // 开启 下拉刷新
      that.isTriggered = true
      setTimeout(function () {
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    }, */
    //触底加载
    /* onScrolltolower() {
      console.log('已滚动到底部');
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    }, */
    // 获取任务详情
    getTaskDetailFun() {
      let that = this
      // 获取坐标
      let lat = uni.getStorageSync('lat')
      let lon = uni.getStorageSync('lng')
      that.$reward.getTaskDetailAPI({
        lat: lat, //纬度
        lng: lon, //经度
        id: that.taskId,
      }).then(res => {
        let resData = res.data.result
        // 处理平台数据
        resData.apply_condition = JSON.parse(resData.apply_condition)
        if(resData.note_platforms.length > 0){
          const noteArr = []
          const note = JSON.parse(resData.note_platforms)
          note.forEach((item, index2) => {
            that.platformData.forEach((platItem, platIndex) => {
              if (platItem.platformType === item) {
                noteArr.push({
                  platformType: platItem.platformType,
                  title: platItem.title,
                  image: that.imgUrl + platItem.image,
                  apply_condition: item ===1 ? resData.apply_condition.xhs_fansNum : item ===2 ? resData.apply_condition.dy_fansNum : item === 3 ? resData.apply_condition.dz_Level :  resData.apply_condition.mt_Level,
                  fileList: [],
                })
              }
            })
          })
          resData.note_platforms = noteArr
        }
        console.log('店铺详情=', resData)
        if (resData.type === 2){
          if (resData.shopPackageInfo){
            //把数组字符串转换为数组数字
            let weekArr = resData.shopPackageInfo.week.map(item => parseInt(item))
            //改变数据类型
            const weekData = weekArr.map(num => ({
              1: {title: '一', num: '1'},
              2: {title: '二', num: '2'},
              3: {title: '三', num: '3'},
              4: {title: '四', num: '4'},
              5: {title: '五', num: '5'},
              6: {title: '六', num: '6'},
              7: {title: '日', num: '7'}}[num]));
            let weekMax = ''
            let weekMin = ''
            //判断是否连续
            if(this.isArrayContinuous(weekArr)){
              weekData.forEach((itemWeek) => {
                if (itemWeek.num == Math.max(...weekArr)) {
                  weekMax = "星期"+itemWeek.title
                } else if(itemWeek.num == Math.min(...weekArr)) {
                  weekMin = "星期"+itemWeek.title
                }
              });
              resData.shopPackageInfo.weekStuta = weekMin + "到" + weekMax
              //console.log('是连续数字',that.weekList)
            }else{
              resData.shopPackageInfo.weekStuta = ''
              weekData.forEach((itemWeek) => {
                resData.shopPackageInfo.weekStuta += "星期"+itemWeek.title+","
              })
              resData.shopPackageInfo.weekStuta = resData.shopPackageInfo.weekStuta.replace('undefined','')
              //console.log('不是连续数字')
            }
          }else {
            uni.showModal({
              title: '提示',
              content: '该任务还没有绑定套餐，请等待绑定套餐',
              showCancel: false,
              confirmText: '好的',
              success: function (res) {
                if (res.confirm) {

                }
              }
            });
          }
        }
        if (resData.user_enroll_status === 0){
          that.normalBtnShow = true
          that.uploadNoteBtnShow = false
        } else {
          that.normalBtnShow = false
          that.uploadNoteBtnShow = true
          // 已报名的获取报名id
          that.signId = resData.user_enroll_id
          console.log('已报名的id=', that.signId)
        }
        that.detailData = resData
        console.log('店铺状态=', that.normalBtnShow)
        that.detailPlatform = resData.note_platforms
        that.taskDetailData = resData.shopPackageInfo.goods
        //使用规则动态赋值
        console.log('平台详情taskDetailData=', that.taskDetailData)
        console.log('店铺详情resData==', resData)

      })
    },
    //计算数组是否连续
    isArrayContinuous(arr) {
      const min = Math.min(...arr);
      const max = Math.max(...arr);
      const expectedLength = max - min + 1; // 计算理论上应有的长度
      const seen = new Set(arr); // 使用Set来记录已经出现的数字

      // 检查是否所有数字都出现过
      for (let i = min; i <= max; i++) {
        if (!seen.has(i)) {
          return false;
        }
      }
      return true;
    },
    // 获取报名任务详情
    getSignUpTaskDetailFun(id) {
      let that = this
      that.$reward.getSignUpTaskDetailAPI({id: id}).then(res => {
        console.log('报名任务详情=', res.data.result)
        that.maskAssetData = res.data.result.material
        // 隐藏立即报名按钮、显示获取任务素材按钮和取消报名，这里必须显示去上传笔记凭证按钮
        that.normalBtnShow = false
        // 显示去上传笔记凭证按钮
        that.uploadNoteBtnShow = true
      })
    },
    //报名截止倒计时
    findcountdown(item) {
      const now = new Date().getTime();
      let endTime = new Date(item.end_time).getTime() + 30*60*1000
      let isend = endTime - now > 0 ? (endTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      // console.log('结束时间',seconds)
      return seconds
    },
    // 获取我的平台数据
    getPlatformData() {
      let that = this
      that.$api.MyuserCertifiedlist({
        platform_type: 2
      }).then(res => {
        console.log('我的平台数据', res.data.result)
        that.myPlatformData = res.data.result
      })
    },

    // 获取任务素材
    getTaskAssetFun(id) {
      let that = this
      that.$reward.getTaskAssetAPI({
        enroll_id: id
      }).then(res => {
        console.log('任务素材', res.data.result.materialList)
        that.SuccessStatus = res.data.result.status
        // 任务素材列表弹窗显示
        that.downloadAssetShow = true
        // 下载任务素材弹窗按钮显示
        that.uploadNoteBtnShow = true
        that.maskAssetData = res.data.result.materialList
        that.copywritingTitle = res.data.result.copyWrit.title
        that.copywritingContent = res.data.result.copyWrit.content
        res.data.result.materialList.forEach(item => {
          that.maskAssetJPG ++
          /* if (item.type === 1){
            that.maskAssetJPG ++
          } else if (item.type === 2){
            that.maskAssetMP4 ++
          } */
        })
        console.log('素材数量=', that.maskAssetJPG, that.maskAssetMP4)
      }).catch(err => {
        uni.showToast( {
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        })
      })
    },
    // 报名提示
    SignUpTipFun(type){
      let that = this
      let isTrue = true
      let trueNum = 0
      that.detailPlatform.forEach(item => {
        if (isTrue){
          if(that.myPlatformData.length < 0){
            that.platformVal = {
              type: item.platformType,
              num: item.apply_condition,
              title: "您还没有认证平台",
            }
          }else {
            let isSatisfy = that.myPlatformData.some(item2 => {
              if (item.platformType === 1){
                that.platformVal = {
                  type: item.platformType,
                  num: item.apply_condition,
                  title: item.title,
                }
                return item2.platform_type === 1 && Number(item2.fans) >= Number(item.apply_condition)
              }
              else if (item.platformType === 2){
                that.platformVal = {
                  type: item.platformType,
                  num: item.apply_condition,
                  title: item.title,
                }
                return item2.platform_type === 2 && Number(item2.fans) >= Number(item.apply_condition)
              } else if (item.platformType === 3){
                that.platformVal = {
                  type: item.platformType,
                  num: item.apply_condition,
                  title: item.title,
                }
                return item2.platform_type === 3 && Number(item2.level) >= Number(item.apply_condition)
              } else if (item.platformType === 4){
                that.platformVal = {
                  type: item.platformType,
                  num: item.apply_condition,
                  title: item.title,
                }
                return item2.platform_type === 4 && Number(item2.level) >= Number(item.apply_condition)
              }
            })
            console.log('是否满足', isSatisfy, that.platformVal)
            if (isSatisfy === false){
              that.signUpFailShow = true
              isTrue = false
              return
            } else {
              trueNum++
            }
          }
        }
        if (!isTrue) return
      })
      if (trueNum === that.detailPlatform.length){
        if (type === 1){
          that.signUpSuccessShow = true
        }else {
          that.$reward.getSignUpTaskAPI({
            task_id: that.taskId
          }).then(res => {
            console.log('报名成功', res.data)
            if (res.data.code == 200){
              that.signId = res.data.result.enroll_id
              that.SuccessStatus = res.data.result.status
              console.log('报名成功状态=', that.SuccessStatus)
              // 显示去购买套餐按钮
              that.expertShowBtn = true
              uni.showToast( {
                title: res.data.msg,
                icon: 'none',
                duration: 1500
              })
            }
          }).catch(err => {
            uni.showToast( {
              title: err.data.msg,
              icon: 'none',
              duration: 1500
            })
          })
          /* uni.showModal({
            title: '提示',
            content: '恭喜您，满足条件！可以去购买套餐。',
            showCancel: false,
            confirmText: '确认',
            success: function (res) {
              // 显示去购买套餐按钮
              that.expertShowBtn = true
            }
          }) */
        }
      }
    },

    // 报名事件
    SignUpFun(id){
      let that = this
      that.$reward.getSignUpTaskAPI({
        task_id: id
      }).then(res => {
        console.log('报名成功', res.data)
        if (res.data.code == 200){
          that.SuccessStatus = res.data.result.status
          that.signId = res.data.result.enroll_id
          uni.showToast( {
            title: res.data.msg,
            icon: 'none',
            duration: 1500
          })
        }
        setTimeout(function () {
          // 显示获取任务素材
          that.normalBtnShow = false
          // 关闭确认报名弹窗
          that.signUpSuccessShow = false
        }, 1500)
      }).catch(err => {
        uni.showToast( {
          title: err.data.msg,
          icon: 'none',
          duration: 1500
        })
      })

    },
    // 显示达人报名弹窗
    showPackageFun(){
      let that = this
      // 显示达人报名套餐弹窗
      that.expertSignUpSuccessShow = true
    },
    // 去购买套餐
    BuyTaskPackageFun(id){
      let that = this
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      } else {
        let Phone = uni.getStorageSync('userinfo').username
        //先判断是否绑定手机号
        if (!Phone) {
          that.BingdingPhone_Popup = true
        } else {
          that.$reward.getBuyTaskPackageAPI({
            shop_package_id: id,
            enroll_id: that.signId
          }).then(res => {
            console.log('去购买套餐=', res.data)
            // 关闭达人报名套餐弹窗
            that.expertSignUpSuccessShow = false
            if (res.data.code == 200){
              let order_id = res.data.result.order_id
              let shopName = that.detailData.shopPackageInfo.name
              let price = that.detailData.shopPackageInfo.price
              uni.navigateTo({
                url: '/subpackageA/pages/PaymentOrders/PaymentOrders?order_id=' + order_id + '&name=' + shopName + '&price=' + price
              })
              uni.showToast( {
                title: res.data.msg,
                icon: 'none',
                duration: 1500
              })
            }
            setTimeout(function () {
              // 显示获取任务素材
              that.normalBtnShow = false
            })
          }).catch(err => {
            uni.showToast( {
              title: err.data.msg,
              icon: 'none',
              duration: 1500
            })
          })
        }
      }
    },

    // 取消任务报名
    cancelSignUpFun(){
      let that = this
      uni.showModal({
        title: '取消任务报名',
        content: '确定要取消任务报名订单吗？',
        cancelColor: '#999',
        confirmColor: '#FF7900',
        success: res => {
          if (res.confirm) {
            that.$reward.getCancelSignUpTaskAPI({
              enroll_id: that.signId
            }).then(rees => {
              uni.showToast({
                title: '取消成功',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                })
              }, 1500)
            })
          }
        }
      })
    },
    // 下载任务素材
    downloadAssetFun(){
      let that = this
      // 立即下载按钮隐藏，并且显示正在下载中和进度条
      that.downloadAssetProcessBtn = false
      console.log('素材数量JPG=', that.maskAssetJPG)
      console.log('assetNum=', that.assetNum)
      // 重新计算素材数量
      that.assetPercent = 1/that.maskAssetData.length * 100
      let downTrue = true
      that.maskAssetData.forEach(item => {
        console.log('下载素材', item)
        console.log('downTrue=', downTrue)
        if (downTrue){
          if (that.assetNum === that.maskAssetData.length){
            downTrue = false
            // 显示去上传笔记凭证按钮
            that.uploadNoteBtnShow = true
            return
          }
          that.saveImageAndAddToAlbum(item.url)
        }

      })

    },
    // 保存图片事件
    aaveAssetImgFun(){
      let that = this
      that.assetNum = 0
      that.downloadAssetFun()
    },
    // 保存图片并添加到相册
    saveImageAndAddToAlbum(url){
      let that = this
      uni.downloadFile( {
        url: url,
        method: 'GET',
        success: (data) => {

          if (data.statusCode === 200){
            // console.log('下载素材', data)
            const fileManager = uni.getFileSystemManager()
            fileManager.saveFile({
              tempFilePath: data.tempFilePath, // 下载后的文件临时路径
              success: (res) => {
                // console.log('保存成功', res)
                that.assetPercent = that.assetPercent + 1/that.maskAssetData.length * 100
                that.assetNum ++
                // console.log('下载进度百分比', that.assetNum)
                if (that.assetNum === that.maskAssetData.length){
                  uni.showToast({
                    title: '下载完成',
                    icon: 'none',
                    duration: 1500
                  })
                }
                // that.downloadAssetNum = that.downloadAssetNum / that.maskAssetData.length * 100
                uni.saveImageToPhotosAlbum({ // 保存到系统相册。
                  filePath: res.savedFilePath,
                  success: function () {
                    console.log('保存成功');
                    setTimeout(function () {
                      // 下载素材弹窗关闭
                      that.downloadAssetShow = false
                      // 显示去上传笔记凭证按钮
                      that.uploadNoteBtnShow = true
                      // 外面进来的时候，下载素材弹窗显示，保存图片，更改状态为7
                      that.detailData.user_enroll_status = 7
                      // 下载素材完成弹窗显示
                      that.downloadAssetFinishShow = true
                    }, 2000)


                    // uni.showToast({ title: '保存成功', icon: 'success' });
                  },
                  fail: function (error) {
                    console.log('保存失败:', error);
                    // uni.showToast({ title: '保存失败', icon: 'none' });
                  }
                });
              },
              fail: function (error) {
                console.log('保存失败:', error);
                // uni.showToast({ title: '保存失败', icon: 'none' });
              }
            })
          }
        }
      })
    },
    // 查看素材事件
    checkAssetFun(){
      let that = this
      // 显示下载素材弹窗
      that.downloadAssetShow = true
      // 隐藏下载素材按钮
      that.uploadNoteBtnShow = false
      // 隐藏下载进度条
      that.downloadAssetProcessBtn = true
      // 显示保存图片按钮、显示文案
      that.lookAssetShow = true
      console.log('查看素材按钮', that.uploadNoteBtnShow)
      // 调用素材方法
      that.getTaskAssetFun(that.signId)

    },
    //微信授权绑定手机号
    getPhoneNumber(e){
      //console.log('用户信息==',e.detail)
      this.$api.getWXPhoneNumber({
        code: e.detail.code,
        encryptedData: e.detail.encryptedData
      }).then(res => {
        uni.showToast({title:'手机号绑定成功！',icon:'success'})
        this.BingdingPhone_Popup = false
        // 调用用户信息事件，并缓存用户信息
        this.GetUserInfo()
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages_reward/pages/reward_detail/reward_detail?taskId=' + this.taskId
          })
        }, 1000)
      }).catch(err => {
        console.log('获取用户信息', err.data.msg)
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        })
      })
    },
    // 获取用户信息
    GetUserInfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        console.log('个人信息', res.data.result);
        that.userInfo = res.data.result;
        uni.setStorageSync('userinfo', res.data.result)
      }).catch(err => {
        // uni.showToast({
        // 	title: err.data.msg,
        // 	icon: 'none',
        // 	duration: 4000
        // });
      });
    },
    // 上传笔记凭证
    UploadNoteVoucherFun(res){
      console.log('报名id=', this.signId)
      uni.navigateTo({
        url: '/sub_account/pages/upload_note?data=' + encodeURIComponent(JSON.stringify(res)) + '&signId=' + this.signId +  '&source=taskDetail' + '&taskSource=taskOrder'
      })
    },
    // 进入店铺详情页面
    goShopDetails(data){
      // console.log('店铺详情=', data)
      let shopsID = data.shopPackageInfo.id
      uni.navigateTo( {
        url: '/subpackageB/pages/shopsDetails/shopsDetails?shops_id=' + shopsID
      })
    },
    // 进入套餐详情页面
    gotoPackageDetail(data){
      let packageID = data.shop_package_id
      uni.navigateTo({
        url: '/subpackageA/pages/PackageDetails/PackageDetails?package_id=' + packageID
      })
    },
    // 套餐详情显示
    taskPackageShowFun(){
      let that = this
      that.taskPackageShow = true
    },
    // 复制文案
    copyWritingFun(title, content){
      let that = this
      let copyText = ''
      if (title && content){
        copyText = "标题：" + title + '+ 内容：' + content
        // 关闭素材下载完成弹窗
        that.downloadAssetFinishShow = false

      } else if (title){
        copyText = title
      } else if (content) {
        copyText = content
      }
      console.log('copyText', copyText)
      uni.setClipboardData({
        data: copyText, // copyText是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    // 去浏览其他任务
    gotoOtherPage(){
      uni.switchTab({
        url: '/pages/reward/reward'
      })
    },
    // 去认证平台
    gotoPlatform(){
      uni.navigateTo({
        url: '/sub_account/pages/account_list'
      })
    },
    // 订单详情跳转到客服
    handleContact(){
      const data = uni.getStorageSync('customerServiceData')
      console.log('跳转到客服', data);
      wx.openCustomerServiceChat({
        //企业微信的企业id
        corpId:  data.app.corpId,
        extInfo: {
          //客服链接
          url: data.app.url
        },
        success(res) {
          console.log('跳转成功', res)
        },
        fail(res) {
          console.log('跳转失败', res)
        }
      })

    },
    // 返回事件
    handleBack(){
      console.log('返回');
      uni.navigateBack({
        delta: 1
      })
    },

  }
}
</script>

<style lang="scss">
page{
  background: #f4f4f4;
  width: 100%;
  height: 100%;
}
.reward_detail{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* header 头部css */
.header{
  width: 100%;
  .header_title{
    width: 100%;
    font-size: 32rpx;
    color: #3D3D3D;
    text-align: center;
    padding-left: 88rpx;
    .header_title_num{
      font-size: 32rpx;
      color: #FF6700;
      padding-left: 10rpx;
    }
  }
}

/* 主题内容css */
.reward_detail_content{
  width: 100%;
  flex: 1;
  overflow: auto;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  .reward_detail_list{
    position: relative;
    .reward_detail_box{
      padding: 24rpx 20rpx 0;


    }
  }
}
/* 店铺信息css */
.detail_shop{
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-bottom: 20rpx;
  .detail_shop_name{
    padding: 20rpx 20rpx 0;
    display: flex;
    align-items: center;
  }
  .detail_shop_content{
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    .reward_item_img{
      width: 200rpx;
      height: 200rpx;
      border-radius: 16rpx;
      overflow: hidden;
    }
    .reward_item_warp{
      flex: 1;
      margin-left: 20rpx;
      .reward_item_title{
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 40rpx;
        margin-bottom: 10rpx;
      }
      .reward_item_warp_content{
        position: relative;
        /* 距离css */
        .reward_distance{
          padding-bottom: 10rpx;
          .distance_text{
            font-size: 24rpx;
            color: #666666;
          }
        }
        /* 平台css */
        .rewar_item_platform{
          .reward_item_platform_item{
            display: flex;
            align-items: center;
            padding-bottom: 10rpx;
            .platform_item_img{
              width: 36rpx;
              height: 36rpx;
            }
            .platform_item_name{
              margin-left: 10rpx;
              font-size: 24rpx;
              color: #666666;
              line-height: 34rpx;
            }
          }
          .platform_item_commission{
            font-size: 24rpx;
            color: #FF5F15;
            padding-top: 10rpx;
          }
        }
        .reward_item_btn{
          position: absolute;
          right: 0;
          bottom: 0;
          .item_remain{
            font-size: 24rpx;
            color: #888888;
            line-height: 34rpx;
            text-align: center;
            margin-bottom: 10rpx;
          }
          .item_btn{
            width: 160rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            font-size: 26rpx;
            color: #FFFFFF;
            background: linear-gradient( 270deg, #FF5429 0%, #FF7F14 100%);
            border-radius: 200rpx 200rpx 200rpx 200rpx;
          }
        }
      }
    }
  }
  /* 倒计时 */
  .detail_shop_countdown{
    height: 56rpx;
    padding-left: 20rpx;
    border: 1px solid #FFFFFF;
    border-radius: 0 0 16rpx 16rpx;
    background: #FFF9EE;
    display: flex;
    align-items: center;
    .countdown_text{
      font-size: 24rpx;
      color: #666666;
    }
    .countdown_time{
      font-size: 24rpx;
      color: #FF7100;
    }
  }
}
/* 任务流程css */
.reward_detail_warp{
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-bottom: 20rpx;
  .process_title{
    padding: 20rpx;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #3D3D3D;
    line-height: 44rpx;
    .title_line{
      width: 8rpx;
      height: 32rpx;
      margin-right: 20rpx;
      background: linear-gradient( 180deg, #FF7800 0%, #FF6600 100%);
      border-radius: 20rpx;
    }
  }
  .process_content{
    width: 100%;
    padding: 0 20rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 任务流程内容css */
    .sign_process_item{
      display: flex;
      .sign_process_item_left{
        text-align: center;
        .sign_process_item_text{
          font-size: 26rpx;
          color: #3D3D3D;
          padding-top: 10rpx;
        }
      }
      .sign_process_item_right{
        padding-top: 10rpx;
        padding-left: 20rpx;
      }
    }
  }
  /* 查看文案素材 */
  .process_copywriting{
    padding: 4rpx;
    .process_copywriting_content{
      padding: 14rpx 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #FFF9EE;
      .process_copywriting_title{
        flex: 1;
        font-size: 28rpx;
        color: #FF6900;
        line-height: 40rpx;
      }
      .process_copywriting_btn{
        width: 140rpx;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 26rpx;
        color: #FFFFFF;
        text-align: center;
        background: linear-gradient( 104deg, #FF5429 0%, #FF7917 100%);
        border-radius: 200rpx 200rpx 200rpx 200rpx;
      }
    }
  }
}
/* 返利css */
.sign_rebate{
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  .sign_rebate_content{
    .subinfo_item{
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 30rpx;
    }
  }
}
/* 支付方式css */
.Pay_type {
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  .type_item {
    position: relative;
    .yebuzu {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 172rpx;
      text-align: center;
      height: 56rpx;
      line-height: 56rpx;
      background-color: #FFEDE7;
      border-radius: 0 10px 0 10px;
      color: #FF4E0D;
    }

    .pay_name {
      align-items: center;

      image {
        width: 45rpx;
        height: 45rpx;
        margin-right: 22rpx;
        border-radius: 12rpx;
      }

      view {
        font-size: 32rpx;
        span {
          font-size: 28rpx;
          color: #666666;
          margin-left: 10rpx;
        }
      }
    }

    .choose_icon {
      margin-left: auto;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
/* 底部css */
.reward_detail_footer{
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  background-color: #ffffff;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
  .reward_detail_footer_content{
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 16rpx 16rpx 16rpx;
    /* 客服css */
    .service{
      width: 88rpx;
      height: 88rpx;
      font-size: 24rpx;
      text-align: center;
      color: #3D3D3D;
    }
    /* 报名按钮css */
    .submit_btn{
      width: 440rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      color: #FFFFFF;
      background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
      border-radius: 200rpx;
    }
    /* 普通任务按钮css */
    .normal_submit_btn{
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      margin-left: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .submit_cancel{
        width: 35%;
        height: 80rpx;
        line-height: 80rpx;
        color: #666666;
        background: #FFFFFF;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        border: 2rpx solid #D2D2D2;
      }
      .submit_btn{
        width: 60%;
        height: 80rpx;
        line-height: 80rpx;
        color: #FFFFFF;
        background: linear-gradient( 104deg, #FF5429 0%, #FF8118 100%);
        border-radius: 200rpx 200rpx 200rpx 200rpx;
      }
    }
    /* 达人任务按钮显示 */
    .wait_submit_btn{
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      margin-left: 30rpx;
      text-align: center;
      font-size: 32rpx;
      color: #FFFFFF;
      background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
      border-radius: 200rpx;
      position: relative;
      .wait_submit_btn_tip{
        width: 286rpx;
        height: 56rpx;
        position: absolute;
        top: -30rpx;
        right: 50rpx;
        z-index: 1;
        .wait_submit_btn_tip_text{
          font-size: 24rpx;
          color: #FFFFFF;
          position: absolute;
          top: -20rpx;
          right: 30rpx;
          z-index: 10;
        }
      }
    }
    /* 去上传笔记凭证按钮css */
    .submit_note_btn{
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: #FFFFFF;
      background: linear-gradient( 104deg, #FF5429 0%, #FF8118 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
    }
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding: 50rpx 0;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}

/* 报名成功弹窗css */
.sign_success_box{
  background: #F6F6F6;
  position: relative;
  .sign_success_title{
    font-size: 32rpx;
    color: #3D3D3D;
    text-align: center;
    padding-top: 20rpx;
  }
  .sign_success_content{
    padding: 0 20rpx;
  }
  .sign_success_btn{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background-color: #ffffff;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    .sign_success_btn_content{
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 16rpx 16rpx 16rpx;
      .submit_btn{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
        color: #FFFFFF;
        background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
        border-radius: 200rpx;
      }
      .submit_btn_tip{
        width: 140rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        position: absolute;
        top: -8rpx;
        right: 30rpx;
        .submit_btn_tip_text{
          width: 140rpx;
          height: 44rpx;
          line-height: 48rpx;
          text-align: center;
          font-size: 24rpx;
          color: #3D3D3D;
          position: absolute;
          top: -4rpx;
          right: 6rpx;
          z-index: 10;
        }
      }
    }
  }
}
/* 报名失败弹窗css */
.sign_fail_box{
  background: #FFFFFF;
  padding: 40rpx;
  .sign_fail_img{
    width: 96rpx;
    height: 96rpx;
    margin: 0 auto 30rpx;
  }
  .sign_fail_title{
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    color: #3D3D3D;
    line-height: 44rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .sign_fail_subtitle{
    width: 100%;
    line-height: 36rpx;
    font-size: 26rpx;
    color: #666666;
    text-align: center;
    margin-bottom: 30rpx;
  }
  .sign_fail_content{
    width: 100%;
    height: 120rpx;
    padding: 20rpx 30rpx;
    background: #F8F8F8;
    border-radius: 16rpx;
    margin-bottom: 40rpx;
    .sign_fail_text{
      font-size: 28rpx;
      font-weight: bold;
      padding-bottom: 10rpx;
    }
    .platform_item_name{
      font-size: 26rpx;
      color: #666666;
      line-height: 36rpx;
    }
  }
  .sign_fail_btn{
    .sign_fail_btn_content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      font-size: 28rpx;
      .submit_cancel{
        width: 45%;
        height: 80rpx;
        line-height: 80rpx;
        color: #666666;
        background: #FFFFFF;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        border: 2rpx solid #D2D2D2;
      }
      .submit_btn{
        width: 45%;
        height: 80rpx;
        line-height: 80rpx;
        color: #FFFFFF;
        background: linear-gradient( 104deg, #FF5429 0%, #FF8118 100%);
        border-radius: 200rpx 200rpx 200rpx 200rpx;
      }
    }
  }
}
/* 任务素材下载弹窗css */
.download_asset_box{
  background: #F6F6F6;
  position: relative;
  // height: 100%;
  .download_asset_progress{
    padding: 38rpx 20rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx 20rpx;
    .progress_left{
      width: 150rpx;
    }
    .progress_bar{
      flex: 1;
    }
    .progress_right{
      width: 60rpx;
      text-align: right;
    }
  }
  /* 素材图片视频内容 */
  .download_asset_content{
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0 30rpx 20rpx;
    .download_asset_tips{
      padding: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .download_asset_tips_left{
        .download_asset_tips_title{
          font-size: 28rpx;
          color: #3D3D3D;
          padding-bottom: 10rpx;
        }
        .download_asset_tips_content{
          font-size: 24rpx;
          color: #FF5429;
        }
      }
      .download_asset_tips_right{
        .download_asset_tips_right_btn{
          font-size: 24rpx;
          color: #666666;
          text-align: center;
          padding: 10rpx 20rpx;
          background: #FFFFFF;
          border-radius: 200rpx 200rpx 200rpx 200rpx;
          border: 2rpx solid #D5D5D5;
        }
      }
    }
    .download_asset_list{
      width: 100%;
      padding-left: 20rpx;
      .download_asset_item{
        width: 33.33%;
        display: inline-block;
        border-radius: 16rpx;
        .download_asset_item_img{
          padding-right: 20rpx;
          padding-bottom: 20rpx;
        }
      }
    }
  }
  /*  */
  .download_copywriting_warp{
    margin: 0 30rpx 20rpx;
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    .download_copywriting_warp_title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;
      .download_copywriting_warp_title_text{
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 40rpx;
      }
      .download_copywriting_warp_title_copy{
        font-size: 24rpx;
        color: #666666;
        text-align: center;
        padding: 10rpx 20rpx;
        background: #FFFFFF;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        border: 2rpx solid #D5D5D5;
      }
    }
    .download_copywriting_warp_content{
      .download_copywriting_warp_content_text{
        font-size: 26rpx;
        line-height: 36rpx;
      }
    }
  }
  .download_asset_btn{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background-color: #F6F6F6;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    .download_asset_btn_content{
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 16rpx 16rpx 16rpx;
      .submit_btn{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
        color: #FFFFFF;
        background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
        border-radius: 200rpx;
      }
    }
  }
}
/* 下载素材完成弹窗css */
.download_finish_box{
  background: #FFFFFF;
  padding: 40rpx;
  .download_finish_img{
    width: 96rpx;
    height: 96rpx;
    margin: 0 auto 20rpx;
  }
  .download_finish_title{
    font-size: 32rpx;
    color: #3D3D3D;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }
  .download_finish_subtitle{
    font-size: 26rpx;
    color: #666666;
    line-height: 36rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }
  .download_finish_content{
    width: 100%;
    min-height: 120rpx;
    padding: 20rpx 30rpx;
    background: #F8F8F8;
    border-radius: 16rpx;
    margin-bottom: 40rpx;
    .download_copywriting{
      .download_copywriting_title{
        display: flex;
        font-size: 26rpx;
        color: #3D3D3D;
        padding-bottom: 30rpx;
        .download_copywriting_title_text{
          flex: 1;
        }
      }
      .download_copywriting_content{
        display: flex;
        font-size: 26rpx;
        color: #3D3D3D;
        .download_copywriting_content_text{
          flex: 1;
        }
      }
    }
  }
  .download_finish_btn{
    .download_finish_btn_content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      font-size: 28rpx;
      .submit_cancel{
        width: 45%;
        height: 80rpx;
        line-height: 80rpx;
        color: #666666;
        background: #FFFFFF;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        border: 2rpx solid #D2D2D2;
      }
      .submit_btn{
        width: 45%;
        height: 80rpx;
        line-height: 80rpx;
        color: #FFFFFF;
        background: linear-gradient( 104deg, #FF5429 0%, #FF8118 100%);
        border-radius: 200rpx 200rpx 200rpx 200rpx;
      }
    }
  }
}
/* 弹窗详情css */
.task_package_box{
  background: #F6F6F6;
  position: relative;
  .task_package_content{
    padding: 0 20rpx 20rpx;
    .task_package_content_box{
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 30rpx;
      .task_package_content_warp{
        background: #F6F6F6;
        border-radius: 8rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        .task_package_content_t{
          font-size: 26rpx;
          color: #3D3D3D;
        }
      }
      .task_package_content_item_box{
        .task_package_content_item{
          .task_package_content_item_title{
            padding: 10rpx 0;
            font-size: 28rpx;
            color: #3D3D3D;
            font-weight: bold;
          }
          .task_package_content_item_content{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 10rpx 0 0 20rpx;
            font-size: 26rpx;
            .task_package_content_item_content_name{
              flex: 1;
              color: #3D3D3D;
            }
            .task_package_content_item_content_val{
              display: flex;
              align-items: center;
              .task_package_num{
                color: #888888;
                padding-right: 50rpx;
              }
              .task_package_price{
                font-size: 28rpx;
                color: #3D3D3D;
              }
            }
          }
        }
        .task_package_content_original{
          text-align: right;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }
  .task_package_btn{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background-color: #F6F6F6;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    .task_package_btn_content{
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 16rpx 16rpx 16rpx;
      .submit_btn{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
        color: #FFFFFF;
        background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
        border-radius: 200rpx;
      }
    }
  }
}

/* 弹窗公共标题css */
.popup_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  .popup_title_text{
    flex: 1;
    font-size: 32rpx;
    color: #3D3D3D;
    text-align: center;
    padding:30rpx 30rpx 20rpx;
  }
  .popup_title_close{
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    padding: 10rpx;
    background: #EDEDED;
    border-radius: 50%;
  }

}
/* 绑定手机提示弹窗css */
.tc_wrap {
  padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF4E0D;
      }
    }

    .gif_tu {
      width: 100%;
      height: 528rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    justify-content: center;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      //width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      //width: 288rpx;
      margin: 0 auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(104deg, #F18F2C 0%, #FF7A00 100%) !important;
        color: #fff;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }
  }
}
</style>
